<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #toTop {
            position: fixed;
            bottom: 100px;
        }

        .box {
            width: 200px;
            height: 200px;
            border: solid 1px black;
            text-align: center;
            line-height: 200px;
            font-size: 50px;
            margin: 0 auto;
        }

        #btn {
            display: block;
            margin: 20px auto;
            width: 200px;
            height: 40px;
        }
    </style>
</head>
<body style="height: 2000px;">

    <input type="button" id="toTop" value="回到顶部">

    <div class="box">10</div>
    <input type="button" value="开始" id="btn">

</body>
<script>
    // 回到顶部
    var oTotop = document.querySelector("#toTop")
    oTotop.onclick = function () {
        document.documentElement.scrollTop = 0;
    }


    // ========
    // 倒计时

    // 1. 获取元素
    var obox = document.getElementsByClassName("box")[0];
    var obtn = document.getElementById("btn");

    // 4. 准备变量用来存储计时器的唯一标志
    var t;

    // 9. 准备开关变量用来记录按钮的状态：0为开始，1为暂停，2为复位
    var i = 0;

    // 17. 保存初始值，用来做复位
    var s = obox.innerHTML;

    // 2. 绑定事件
    obtn.onclick = function () {
        // 10. 判断开关状态
        if (i === 0) {
            // 11. 如果为0，执行开始功能
            start();
            // 12. 开始功能执行完毕，将开关修改为下次的状态：暂停
            i = 1;
        } else if (i === 1) {
            // 13. 如果为1，执行暂停功能
            stop();
            // 14. 暂停功能执行完毕，将开关修改为下次的状态：开始
            i = 0;
        } else {
            // 16. 如果不为0和1，那么执行复位功能
            reset();
            // 18. 复位功能执行完毕，将开关修改为下次的状态：开始
            i = 0;
        }
    }

    function reset() {
        obox.innerHTML = s;
        obtn.value = "开始";
    }

    function stop() {
        clearInterval(t);
        obtn.value = "继续";
    }

    function start() {
        // 5. 开启之前先清除计时器
        clearInterval(t);
        // 3. 开启计时器
        t = setInterval(function () {
            // 6. 判断倒计时是否到终点
            if (obox.innerHTML <= 1) {
                // 7-1. 清除计时器
                clearInterval(t);
                // 7-2. 显示结束标志
                obox.innerHTML = "结束了";
                // 15. 倒计时结束了，将开关的状态修改为复位的状态
                i = 2;
                obtn.value = "复位";
            } else {
                // 8. 倒计时
                obox.innerHTML--;
            }
        }, 1000);

        obtn.value = "暂停"
    }

</script>
</html>